<template>
  <div class="index">
    <el-container>
      <el-header style="height:80px" class="daohanglan">
        <!-- <img
          class="Companylogos hidden-xs-only"
          src="@/assets/elem.svg"
          alt=""
        /> -->
        <div class="dhzb">
          <div>
          <i class="el-icon-menu hidden-sm-and-up sidebar" @click="sidebar"></i>
          </div>
          <div class="dhzbcd">
            菜单
          </div>
        </div>
        <div class="dhyb">
          <img class="uservata" src="@/assets/touxiang.png" alt="" />
          <el-link class="tuichu" @click="ceshi" :underline="false"
            >退出登录</el-link
          >

          <el-link class="xiugai" @click="addrole" :underline="false"
            >修改密码</el-link
          >
          <el-link
            class="kefu hidden-xs-only"
            @click="lianxikefu"
            :underline="false"
            >联系客服</el-link
          >
          <el-link
            class="shoujikefu hidden-sm-and-up"
            @click="lianxikefu"
            :underline="false"
            >联系客服</el-link
          >
        </div>
      </el-header>
      <el-container>
        <transition name="slide-fade">
          <el-aside
            v-if="flag"
            width="200px"
            style="background-color: #434A50;"
          >
            <el-row class="tac">
              <el-menu
                :default-active="active"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#434A50"
                text-color="#fff"
                active-text-color="#ffd04b"
              >
                <router-link to="My">
                  <el-menu-item index="1-1" @click="sidebar">
                    <i class="el-icon-monitor"></i>
                    <span slot="title">我的</span>
                  </el-menu-item>
                </router-link>
                <router-link to="Vouche">
                  <el-menu-item index="1-2" @click="sidebar">
                    <i class="el-icon-bank-card"></i>
                    <span slot="title">充值中心</span>
                  </el-menu-item>
                </router-link>
                <router-link to="flow">
                  <el-menu-item index="1-3" @click="sidebar">
                    <i class="el-icon-sort"></i>
                    <span slot="title">流程</span>
                  </el-menu-item>
                </router-link>
                <el-submenu index="2">
                  <template slot="title">
                    <i class="el-icon-tickets"></i>
                    <span>业务</span>
                  </template>
                  <!-- <router-link to="Notice"><el-menu-item index="2-2">点击验证动画效果 </el-menu-item></router-link>    -->
                  <!-- <router-link to="Trillbusiness">
                    <el-menu-item index="2-1" @click="sidebar"
                      >D业务</el-menu-item
                    >
                  </router-link> -->
                  <!-- <router-link to="Wellquicklybusiness">
                    <el-menu-item index="2-2" @click="sidebar"
                      >K业务</el-menu-item
                    >
                  </router-link> -->
                  <router-link to="Dbusiness">
                    <el-menu-item index="2-3" @click="sidebar"
                      >D业务</el-menu-item
                    >
                  </router-link>
                  <router-link to="Kbusiness">
                    <el-menu-item index="2-4" @click="sidebar"
                      >K业务</el-menu-item
                    >
                  </router-link>
                </el-submenu>
                <el-submenu index="3">
                  <template slot="title">
                    <i class="el-icon-document-checked"></i>
                    <span>订单中心</span>
                  </template>
                  <!-- <router-link to="Notice"><el-menu-item index="3-3">点击验证动画效果 </el-menu-item></router-link>    -->
                  <router-link to="Trillorders">
                    <el-menu-item index="3-1" @click="sidebar"
                      >D订单</el-menu-item
                    >
                  </router-link>
                  <router-link to="Wellquicklyorders">
                    <el-menu-item index="3-2" @click="sidebar"
                      >K订单</el-menu-item
                    >
                  </router-link>
                </el-submenu>
                <el-submenu
                  index="4"
                  v-if="this.user.power == 1 || this.user.power == 2"
                >
                  <template slot="title">
                    <i class="el-icon-user"></i>
                    <span>代理用户</span>
                  </template>
                  <!-- <router-link to="Notice"><el-menu-item index="4-2">点击验证动画效果 </el-menu-item></router-link>    -->
                  <router-link to="domesticconsumer">
                    <el-menu-item index="4-1" @click="sidebar"
                      >普通用户</el-menu-item
                    >
                  </router-link>
                  <router-link to="Proxyconfiguration">
                    <el-menu-item index="4-2" @click="sidebar"
                      >代理配置</el-menu-item
                    >
                  </router-link>
                </el-submenu>
                <el-submenu index="5">
                  <template slot="title">
                    <i class="el-icon-coin"></i>
                    <span>收支中心</span>
                  </template>
                  <router-link to="rechargerecord">
                    <el-menu-item index="5-1" @click="sidebar"
                      >充值记录</el-menu-item
                    >
                  </router-link>
                  <!-- <router-link to="Notice"><el-menu-item index="5-5">点击验证动画效果 </el-menu-item></router-link>    -->
                  <router-link
                    to="Commissionrecord"
                    v-if="this.user.power == 1 || this.user.power == 2"
                  >
                    <el-menu-item index="5-2" @click="sidebar"
                      >返佣记录</el-menu-item
                    >
                  </router-link>
                  <router-link
                    to="Withdrawalrecord"
                    v-if="this.user.power == 1 || this.user.power == 2"
                  >
                    <el-menu-item index="5-3" @click="sidebar"
                      >提现记录</el-menu-item
                    >
                  </router-link>
                </el-submenu>
              </el-menu>
            </el-row>
          </el-aside>
        </transition>

        <el-main class="NaRongLan">
          <div class="content" @click="leftnavigation">
            <router-view> </router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>

    <!-- 新增 -->
    <el-dialog
      title="更新你的密码"
      :visible.sync="dialogVisible"
      width="350px"
      style="text-align: center !important;"
    >
      <el-form label-width="" :model="formLabelAlign">
        <el-form-item prop="username" label="你的账号:">
          <el-input
            :placeholder="username"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item prop="old_password" label="你的现密码:">
          <el-input
            type="password"
            v-model="old_password"
            placeholder="填写你的现密码:"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item prop="new_password" label="你的新密码:">
          <el-input
            type="password"
            v-model="new_password"
            placeholder="确认你的新密码:"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="Update">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 客服二维码 -->
    <el-dialog
      :title="`添加${xuanze}`"
      :visible.sync="dialogVisible222"
      width="330px"
      style="text-align: center !important;"
    >
      <div v-if="dialogVisible222">
        <div v-if="xuanzezhi == 1">
          <span>如有订单、支付等问题，请扫码联系客服</span>
          <img
            :src="kefutupian[0].tupiandizhi"
            style="width: 280px;height: 280px;"
            v-if="kefutupian.length > 0"
          />
          <img
            src="@/assets/客服图片.jpg"
            style="width: 280px;height: 280px;"
            v-else
          />
        </div>
        <div v-else>
          <span style="display: inline-block;"
            >如有代理相关问题请扫码咨询商务</span
          >
          <img
            :src="shangwutupian[0].tupiandizhi"
            style="width: 280px;height: 280px;"
            v-if="shangwutupian.length > 0"
          />
          <img
            src="@/assets/商务图片.jpg"
            style="width: 280px;height: 280px;"
            v-else
          />
        </div>
        <div>
          <el-button type="primary" @click="qiehuan">{{ xuanze2 }}</el-button
          ><el-button
            type="primary"
            @click="gb"
            style="margin-top: 10px;margin-left: 20px;width: 100px;"
            >关闭</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { removeToken } from '@/utils/auth'
export default {
  props: {},
  data() {
    return {
      dialogVisible: false,
      dialogVisible222: false,
      formLabelAlign: {},
      dengluzhi: "",
      old_password: "",
      new_password: "",
      username: "",
      flag: true,
      dcWidth: 0,
      kefutupian: [],
      shangwutupian: [],
      xuanze: "客服微信",
      xuanze2: "查看商务微信",
      xuanzezhi: 1
    };
  },
  mounted() {
    this.dcWidth = document.body.clientWidth;
    window.onresize = () => {
      return (() => {
        this.dcWidth = document.body.clientWidth;
      })();
    };
  },
  computed: {
    ...mapState(["user"]),
    active() {
      return this.$route.name;
    }
  },
  created() {},
  // mounted() {

  // },
  watch: {
    dcWidth(newVal, oldVal) {
      if (newVal > 768) {
        this.flag = true;
      }
      if (newVal < 768) {
        this.flag = false;
      }
    }
  },
  methods: {
    qiehuan() {
      if (this.xuanzezhi === 0) {
        this.xuanze = "客服微信";
        this.xuanze2 = "查看商务微信";
        this.xuanzezhi = 1;
        return false;
      }
      if (this.xuanzezhi === 1) {
        this.xuanze = "商务微信";
        this.xuanze2 = "查看客服微信";
        this.xuanzezhi = 0;
        return false;
      }
    },
    inform() {
      const h = this.$createElement;
      this.$msgbox({
        customClass: "message-Index",
        confirmButtonText: "关闭",
        center: true,
        message: h(
          "div",
          {
            style: "width: 100%;height:100%"
          },
          [
            h("img", {
              attrs: {
                src: require("@/assets/active.16cc266.jpg")
              }
            })
          ]
        )
      })
        .then(() => {})
        .catch(err => {
          console.log(err);
        });
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    ceshi(){
      this.$confirm('确定要退出登录吗',{
       confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
     }).then(()=>{
       this.LogOut()
       this.$message({
            type: 'success',
            message: '退出成功!'
          });
     }).catch(()=>{
       this.$message({
         type: 'info',
         message: '已取消退出登录'
       })
     })
    },
   async LogOut() {
      const [err, res] = await this.$http.request({
          url:'/logout',
          method:'POST',
      })
      removeToken();
      this.$router.push("/Login");
    },
    //点击修改密码
    addrole() {
      this.dialogVisible = true;
      this.dengluzhi = this.user.dengluzhi;
      this.username = this.user.username;
    },
    //修改密码接口
    async Update() {
      const [err, res] = await this.$http.request({
        url: "/changePassword",
        method: "POST",
        data: {
          old_password: this.old_password,
          new_password: this.new_password
        }
      });
      console.log(res.data.result);
      if(res.data.result===1){
          this.$message({
          showClose: true,
          message: "修改密码成功!",
          type: "success",
          duration: 1800
        });
        this.dialogVisible = false;
      }
      if(res.data.result===0){
          this.$message({
          showClose: true,
          message: "修改密码不规范!请重新修改",
          type: "error",
          duration: 1800
        });
        // this.dialogVisible = false;
      }



      // if (res.data.zhuangtai == "shibai") {
      //   this.$message({
      //     showClose: true,
      //     message: "修改密码失敗,原密码错误!",
      //     type: "error",
      //     duration: 1800
      //   });
      //   this.dialogVisible = true;
      // }
      // if (res.data.zhuangtai == "chenggong") {
      //   this.$message({
      //     showClose: true,
      //     message: "修改密码成功!",
      //     type: "success",
      //     duration: 1800
      //   });
      //   this.dialogVisible = false;
      // }
      if (res.data.cuowutishi == "mimaxiaoyuliuweishu") {
        this.$message({
          showClose: true,
          message: "密码不能小于6位数!",
          type: "error",
          duration: 1800
        });
        this.dialogVisible = true;
      }
      console.log(res);
    },
    sidebar() {
      if (this.dcWidth < 768) {
        this.flag = !this.flag;
      }
    },
    leftnavigation() {
      if (this.flag == false) return;
      if (this.dcWidth <= 768) {
        this.flag = false;
      }
    },
    lianxikefu() {
      this.zhanshitupian();
    },
    gb() {
      this.dialogVisible222 = false;
    },
    async zhanshitupian() {
      const Qs = require("qs");
      const [err, res] = await this.$http.request(
        {
          url: "/abovePic",
          method: "GET"
        },
        {
          // baseURL: "http://192.168.0.113:8000/",
          baseURL: "http://82.156.188.202:80/",
          timeout: 5000,
          withCredentials: true,
          transformRequest: [
            function(data) {
              data = Qs.stringify(data);
              return data;
            }
          ]
        },
        // {
        //   yonghuming: this.user.yonhuming
        // }
      );
      if (err) return;
      console.log(res);
      // this.imgsrc = res.data.tupiandizhi;
      // this.kefutupian = this.imgsrc.filter(item => item.leixing == false);
      // this.shangwutupian = this.imgsrc.filter(item => item.leixing == true);
      this.dialogVisible222 = true;
    }
  },
  components: {}
};
</script>

<style scoped lang="stylus">
@import './Index.styl';
// .el-main{
// 	padding:0px;
// }
// .el-menu-vertical-demo:not(.el-menu--collapse) {
// 	min-height :400px;
// }
// .hidden-xs-only {
// 	min-width :200px;
// }
// .el-aside {
// 	text-align: left !important;
// }
// .el-submenu .el-menu-item {
// 	text-align :center !important border-right 1px solid #545C64;
// }
// .el-menu-item-group__title {
// 	padding: 0px !important
// }
// .el-menu {
// 	border-right: 1px solid #545C64 !important;
// }
// .el-aside {
// 	background-color: #545C64
// }
// .NaRongLan{
// }
// .content {
// }
// .Companylogos{
// 	height : 80px;
// 	width: 200px;
// }
// @media only screen and (max-width: 768px)
// 	.el-header{
// 		position fixed;
// 		width: 100%;
// 	}
// 	.el-main{
// 		margin-top 80px
// 	}
// @media only screen and (min-width: 768px)
// 	.el-header{
// 		position fixed;
// 		width: 100%;
// 	}
// 	.el-main{
// 		margin-left:200px;
// 		margin-top:80px;
// 	}
// 	.el-aside {
// 		position fixed
// 		height: 100%;
// 		top: 80px;
// 	}
// 	.el-aside::-webkit-scrollbar {
//     display: none
//   }
</style>
